<template>
  <el-container class="login-container">
    <el-switch v-model="toggleParticles"
      inactive-color="#ff4949">
    ></el-switch>
    <el-button class="show-account" type="text" @click="accountTip">提示帐号信息</el-button>
    <el-card class="animated flipInY">
      <div slot="header" class="el-card-header">
        <lang-select class="lang-select"></lang-select>
        <div style="clear: both;"></div>
        <img src="../../../static/image/login-logo.png" alt="">
        <h2 class="login-title">{{$t('login.title')}}</h2>
      </div>
      <el-form :rules="rules" :model="loginForm" ref="loginForm" label-width="80px">
        <el-form-item :label="$t('login.account')" prop="username" style="position:relative">
          <el-input type="text" v-model="loginForm.username"
            @keyup.enter.native="goToPwdInput"
            maxlength="20"/>
          <span class="svg-container svg-container_user">
            <svg-icon icon-class="user" />
          </span>
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="pwd">
          <el-input ref="pwd" type="password"
            v-model="loginForm.pwd"
            @keyup.enter.native="onLogin"
            maxlength="20" />
          <span class="svg-container svg-container_password">
            <svg-icon icon-class="password" />
          </span>
        </el-form-item>
        <el-form-item :label="$t('login.remember')" label-width="80px">
          <el-switch v-model="remember"></el-switch>
        </el-form-item>
        <el-button type="primary" @click="onLogin('loginForm')" :loading="loading">{{$t('login.login')}}</el-button>
      </el-form>
    </el-card>
    <!-- particles.js container -->
    <div id="particles"></div>
  </el-container>
</template>
<script>
import { isValidUsername } from '@/utils/validate'
import LangSelect from '@/components/lang-select'
import { saveToLocal, loadFromLocal } from '@/common/local-storage'
import { mapActions } from 'vuex'
/* eslint-disable*/
import particles from 'particles.js'
export default {
  components: {
    LangSelect
  },
  data() {
    // username 验证
    const validateUsername = (rule, value, callback) => {
      if (!isValidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    // pwd 验证
    const validatePwd = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }
    return {
      // 粒子开关
      toggleParticles: false,
      loginForm: {
        username: '',
        pwd: ''
      },
      remember: false,
      loading: false,
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { required: true, trigger: 'blur', validator: validateUsername },
          { required: true, trigger: 'change', validator: validateUsername }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { required: true, trigger: 'blur', validator: validatePwd },
          { required: true, trigger: 'change', validator: validatePwd }
        ]
      }
    }
  },
  created() {
    // 初始化时读取localStorage用户信息
    if (loadFromLocal('remember', false)) {
      this.loginForm.username = loadFromLocal('username', '')
      this.loginForm.pwd = loadFromLocal('password', '')
    } else {
      this.loginForm.username = ''
      this.loginForm.pwd = ''
    }
  },
  methods: {
    ...mapActions([
      'login'
    ]),
    // 用户名输入框回车后切换到密码输入框
    goToPwdInput() {
      this.$refs.pwd.$el.getElementsByTagName('input')[0].focus()
    },
    // 登录操作
    onLogin() {
      this.$refs.pwd.$el.getElementsByTagName('input')[0].blur()
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.login(this.loginForm).then(() => {
            // 保存账号
            if (this.remember) {
              saveToLocal('username', this.loginForm.username)
              saveToLocal('password', this.loginForm.pwd)
              saveToLocal('remember', true)
            } else {
              saveToLocal('username', '')
              saveToLocal('password', '')
              saveToLocal('remember', false)
            }
            this.$router.push({ path: '/home' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    accountTip() {
      this.$notify({
        title: '账号：admin',
        dangerouslyUseHTMLString: true,
        message: '<strong>密码：<i>123456</i></strong>',
        type: 'success',
        position: 'bottom-left'
      })
      this.$notify({
        title: '账号：lucy',
        dangerouslyUseHTMLString: true,
        message: '<strong>密码：<i>123456</i></strong>',
        type: 'success',
        position: 'bottom-left',
        offset: 80
      })
    }
  },
  watch: {
    toggleParticles(val) {
      if(val) {
        particlesJS('particles', {
          "particles": {
            "number": {
              "value": 15
            },
            "color": {
              "value": "random"
            },
            "shape": {
              "type": ["star", "image"],
              "stroke": {
                "width": 0,
                "color": "yellow"
              },
              "polygon": {
                "nb_sides": 5
              },
              "image": {
                "src": "https://neveryu.github.io/avatar/avatar.png",
                "width": 100,
                "height": 100
              }
            },
            "opacity": {
              "value": 1,
              "random": false,
              "anim": {
                "enable": true,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
              }
            },
            "size": {
              "value": 10,
              "random": true,
              "anim": {
                "enable": true,
                "speed": 10,
                "size_min": 0.1,
                "sync": false
              }
            },
            "line_linked": {
              "enable": false,
              "distance": 150,
              "color": "#ccc",
              "opacity": 0.4,
              "width": 1
            },
            "move": {
              "enable": true,
              "speed": 2,
              "direction": "random",
              "random": true,
              "straight": false,
              "out_mode": "out",
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          "interactivity": {
            // "detect_on": "canvas",
            "detect_on": "window",
            "events": {
              "onhover": {
                "enable": false,
                // "mode": "repulse"
                "mode": "grab"
              },
              "onclick": {
                "enable": false,
                "mode": "repulse"
                // "mode": "push"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 400,
                "line_linked": {
                  "opacity": 1
                }
              },
              "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
              },
              "repulse": {
                "distance": 200
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          }
        })
      } else {
        document.getElementById('particles').innerHTML = ''
      }
    }
  },
  mounted() {
    this.accountTip()
  }
}
</script>
<style scoped lang="stylus">
.login-container
  position absolute
  width 100%
  height 100%
  top 0
  left 0
  right 0
  bottom 0
  background mix(#044289, #494166) url('../../../static/image/login-bg.svg') center no-repeat
  background-size cover
  overflow hidden
  .show-account
    position absolute
    left 15px
    bottom 20px
    color var(--red)
    font-weight 500
  .el-card
    position absolute
    top 50%
    left 50%
    margin -300px 0 0 -250px
    width 500px
    height 450px
    background #fff
    .el-card-header
      text-align center
      .lang-select
        float right
    .login-title
      margin 0
      text-align center
    .el-input /deep/ .el-input__inner
      text-indent 12px
    .svg-container
      position absolute
      top 0
      left 5px
      color var(--gray)
      &_user
        font-size 20px
      &_password
        left 7px
        font-size 16px
    .el-button--primary
      width 100%
#particles
  width 100%
  height 100%
  /*background-color #b61924*/
  /*background-color #23ae88*/
  background-color transparent
  // background-image url('/static/image/login-bg.jpg')
  /*background-image url('../img/bg_particles.png')*/
  background-size cover
  background-position 50% 50%
  background-repeat no-repeat
</style>
